<template>
  <div id="page-finance-withdraw">
    <h2>账户提现</h2>

    <Card>
      <Row>
        <Col span="12" offset="6">
          <Form
          ref="form"
          :model="form.data"
          :rules="ruleValidate"
          :label-width="125"
          class="club-info-form mt20">
            <FormItem prop="" label="账户余额">
              {{accountMoney}}元
            </FormItem>
            <FormItem prop="" label="今日可提现金额">
              {{accountMoney - freezeMoney}}元
            </FormItem>
            <FormItem prop="withdrawMoney" label="提现金额">
              <Input v-model.number="form.data.withdrawMoney" type="text" placeholder="请输入提现金额" :maxlength="8"></Input>
            </FormItem>
            <FormItem prop="account" label="提现支付宝账户">
              <Input v-model="form.data.account" type="text" placeholder="请输入提现支付宝账户" :maxlength="100"></Input>
            </FormItem>
            <FormItem prop="newPwd" label="管理员手机号">
              <Row>
                <Col span="12">
                  {{this.userInfo.mobile}}
                </Col>
                <Col span="12" class="tr">
                  <time-count-btn ref="timeCountBtn" type="info" @run="getSmsCode()"></time-count-btn>
                </Col>
              </Row>
            </FormItem>
            <FormItem prop="mobileCode" label="管理员短信验证">
              <Input v-model="form.data.mobileCode" type="text" :maxlength="6" placeholder="请输入验证码"></Input>
            </FormItem>
            <FormItem>
              <Button
                type="primary"
                size="large"
                :loading="isSubmiting"
                @click="onSubmit('form')">
                确认
              </Button>
            </FormItem>
          </Form>
        </Col>
      </Row>
    </Card>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import timeCountBtn from '@/components/time-count-btn'
  import financeApi from '@/api/finance'

  export default {
    name: 'page-finance-withdraw',
    components: {
      timeCountBtn
    },
    data () {
      let validateWithDrawMoney = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入提现金额'))
        } else if (value > (this.accountMoney - this.freezeMoney)) {
          callback(new Error('对不起，提现金额不能大于可提现金额'))
        } else {
          callback()
        }
      }

      return {
        isSubmiting: false,
        accountMoney: null,
        freezeMoney: null,
        form: {
          data: {}
        },
        ruleValidate: {
          withdrawMoney: [
            { required: true, type: 'number', message: '请输入正确的提现金额', trigger: 'blur' },
            { validator: validateWithDrawMoney, trigger: 'change' }
          ],
          account: [
            { required: true, message: '请输入支付宝账户', trigger: 'change' }
          ],
          mobileCode: [
            { required: true, message: '请输入短信验证码', trigger: 'change' }
          ]
        }
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    methods: {
      async getSmsCode () {
        const { body } = await financeApi.getWithdrawSms()
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$Message.info('短信发送成功')
          this.$refs.timeCountBtn.start()
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
            this.$refs.timeCountBtn.stop()
          }, 500)
        }
      },
      onSubmit () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.submitForm()
          } else {
            this.$Message.error('表单验证失败，请按提示检查输入内容')
            this.form.visible = true
            this.loading = false
            setTimeout(() => {
              this.loading = true
            }, 100)
          }
        })
      },
      async submitForm () {
        const { body } = await financeApi.applyWithdrawSms(this.form.data)
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$Message.info('申请成功')
          this.$router.push({path: '/finance/money'})
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      },
      async getRclubAccount () {
        const { body } = await financeApi.getAccount()
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.accountMoney = body.responseData.accountMoney
          this.freezeMoney = body.responseData.freezeMoney
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      }
    },
    mounted () {
      this.getRclubAccount()
    }
  }
</script>

<style>

</style>
